<template>
  <div :style="{ width: props.width, height: props.height }">
    <el-input
      :style="{ width: props.width, height: props.height }"
      v-model="states.value"
      :size="states.size"
      :disabled="states.disabled"
      :placeholder="states.placeholder"
      :maxlength="states.maxlength"
      :minlength="states.minlength"
      :show-word-limit="states.showWordLimit"
      :clearable="states.clearable"
      @input="handleChange"
      type="text"
    >
      <template #prepend>
        <el-button icon="Search" />
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

// const emit = defineEmits(["handleClickLink", "handleClickQuery"]);
const handleChange = (value) => {
  console.log(value);
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, { value });
    }
  });
};
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
  background-color: #2d2d30 !important;
}
</style>
